import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:mziot/app/config/design.dart';
import 'package:mziot/app/modules/lighting/views/lighting_view.dart';
import 'package:mziot/generated/assets.dart';
import 'package:mziot/generated/locales.g.dart';
import 'package:sleek_circular_slider/sleek_circular_slider.dart';

import '../controllers/lighting_controller.dart';

class LightOpenView extends GetView<LightingController> {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      bottom: false,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          SizedBox(height: 40),
          _descView(LocaleKeys.lighting_desc.tr),
          SizedBox(height: 40),
          _circleView,
          Spacer(),
          if (controller.isLock.value) ...{
            _warningView,
            SizedBox(height: 5),
            _descView(LocaleKeys.lighting_action_tips1.tr),
            SizedBox(height: 16),
          },
          lightingBottomView(controller),
        ],
      ),
    );
  }

  Widget _descView(String text) {
    return Text(
      text,
      style: MFont.regular13.apply(
        color: Colors.white,
      ),
      textAlign: TextAlign.center,
    );
  }

  get _circleView {
    return Container(
      child: Obx(() {
        var current = controller.currentLight.value.toDouble();
        if (current < 10) {
          current = 10;
        }
        return SleekCircularSlider(
          onChangeEnd: (double value) {
            controller.uploadLight.value = value.toInt();
            controller.currentLight.value = value.toInt();
            controller.fetchLightDevices();
          },
          innerWidget: (number) {
            return _innerView(number.toInt());
          },
          appearance: CircularSliderAppearance(
            size: 260,
            startAngle: 130,
            angleRange: 280,
            spinnerDuration: 0,
            spinnerMode: false,
            customWidths: CustomSliderWidths(
              trackWidth: 40,
              shadowWidth: 0,
              handlerSize: 15,
              progressBarWidth: 40,
            ),
            animationEnabled: false,
            customColors: CustomSliderColors(
              trackColor: Colors.white,
              progressBarColors: [MColor.xFF25C56F, MColor.xFF4CE4A8],
            ),
          ),
          min: 10,
          max: 100,
          initialValue: current,
        );
      }),
    );
  }

  Widget _innerView(int number) {
    return Center(
      child: Container(
        width: 200,
        height: 200,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            SizedBox(height: 30),
            Opacity(
              opacity: 0.3 + (number - 10) / 129.0,
              child: Image.asset(
                controller.isGroup ? Assets.imagesLightGroup : Assets.imagesLightDevice,
              ),
            ),
            Spacer(),
            Text(
              '$number%',
              style: MFont.semi_Bold20.apply(color: MColor.xFF48A23F),
            )
          ],
        ),
      ),
    );
  }

  get _warningView {
    return Icon(Icons.warning, size: 24, color: Colors.white);
  }
}
